<template>
  <el-dialog
          :title="$t('custom.component.gadget.testPassedData')"
          :visible.sync="ticketDialogVisible"
          width="80vw"
          @opened="dialogOpen"
          append-to-body v-if="ticketDialogVisible"
          :before-close="ticketHandleClose">
          <div style="min-height:733px" v-loading="loading">
            <NextTicketDataGrid v-if="isShow" :nextTicketGadgetSetting="gadgetSetting"  ref="ticket-data-grid" :dataLoading="dataLoading" :nextTicketAllInfo="nextTicketAllInfo" :nextTicketType="nextTicketType"/>
          </div>
      </el-dialog>
</template>
<script>
import NextTicketDataGrid from './NextTticketDataGrid'
export default {
  components: { NextTicketDataGrid },
  props: {
    nextTicketType: {
      type: String
    },
    searchIdentifier: {
      type: String
    },
    maxRecords: {
      type: String
    },
    gadgetSetting: {
      type: Object
    },
    modelId: {},
    optionsId: {
      type:String
    }
  },
  data () {
    return {
      ticketDialogVisible: false,
      nextTicketAllInfo: null,
      loading: false,
      dataLoading: false,
      filterStr: '',
      customFieldFilterStr: '',
      filterDatasetStr: '',
      optionItem: null,
      isShow: false
    }
  },
  methods: {
    ticketHandleClose () {
      this.ticketDialogVisible = false
      this.nextTicketAllInfo = null
      this.isShow = false
    },
    dialogOpen () {
      this.getDataList()
    },
    getDataList () {
      if (!this.searchIdentifier) {
        return this.$message.error('Please select a user before click on "Request Next Ticket" button')
      }
      this.loading = true
      this.dataLoading = true

      if (this.nextTicketType  === 'autotask') {
        let currFilterJson = []
        this.optionItem.filters.rules.forEach(element => {
          currFilterJson.push({
            op: element.opt,
            field: element.key,
            value: element.value
          })
        })
        // let queryBody = {
        //   filter: currFilterJson,
        //   maxRecords: Number(this.maxRecords) ? Number(this.maxRecords) : 25,
        //   includeFields: ''
        // }
        const param = {
          // queryBody: '{"filter":[{"op":"eq","field":"id","value":"373863"}],"maxRecords":25}',
          queryBody: this.filterStr,
          identifier: this.searchIdentifier,
          ruleIds: null,
          modelId: this.modelId || 0,
          filterId:this.optionsId
        }
        this.$interface.nextTicket.getAutoNtGradingDataListAPI(param, { clientCode: this.$store.state.user.tenantCode }).then(({ data: res }) => {
          this.handelGradingData(res)
        }).catch(() => {
          this.loading = false
          this.dataLoading = false
        })
      } else if (this.nextTicketType  === 'nextTicket') {
        const param = {
          // ...this.slicer,
          conditions: this.filterStr ? this.filterStr : '',
          clientCode: this.$store.state.user.tenantCode,
          identifier: this.searchIdentifier || '',
          maxRecords: Number(this.maxRecords) ? Number(this.maxRecords) : 25,
          modelId: this.modelId || 0,
          filterId:this.optionsId
        }
        if(this.customFieldFilterStr) {
          param.customFieldConditions = this.customFieldFilterStr
        }
        this.$interface.nextTicket.getNtGradingDataListAPI(param).then(({ data: res }) => {
          this.handelGradingData(res)
        }).catch(() => {
          this.loading = false
          this.dataLoading = false
        })
      } else if (this.nextTicketType  === 'syncro') {
        const params = {
          queryBody: {
            filter: this.filterStr,
            maxRecords: Number(this.maxRecords) ? Number(this.maxRecords) : 25
          },
          identifier: this.searchIdentifier ? this.searchIdentifier : '',
          ruleIds: null,
          modelId: this.modelId || 0,
          filterId:this.optionsId
        }
        this.$interface.nextTicket.getSyncroGradingDataListAPI(params, this.$store.state.user.tenantCode).then(({ data: res }) => {
          this.handelGradingData(res)
        }).catch(() => {
          this.loading = false
          this.dataLoading = false
        })
      } else if (this.nextTicketType  === 'kaseyabms') {
        const params = {
          queryBody: {
            filter: this.filterStr,
            maxRecords: Number(this.maxRecords) ? Number(this.maxRecords) : 25
          },
          identifier: this.searchIdentifier ? this.searchIdentifier : '',
          ruleIds: null,
          filterId:this.optionsId
        }
        this.$interface.nextTicket.getkaseyabmsGradingDataListAPI(params, this.$store.state.user.tenantCode).then(({ data: res }) => {
          this.handelGradingData(res)
        }).catch(() => {
          this.loading = false
          this.dataLoading = false
        })
      } else {
        const params = {
          queryBody: {
            filter: this.filterStr,
            maxRecords: Number(this.maxRecords) ? Number(this.maxRecords) : 25
          },
          identifier: this.searchIdentifier ? this.searchIdentifier : '',
          ruleIds: null,
          filterId:this.optionsId
        }
        this.$interface.nextTicket.getGradingDataListAPI(params, this.$store.state.user.tenantCode, this.nextTicketType).then(({ data: res }) => {
          this.handelGradingData(res)
        }).catch(() => {
          this.loading = false
          this.dataLoading = false
        })
      }
    },
    handelGradingData (res) {
      if (res.code !== 0) {
        this.loading = false
        this.dataLoading = false
        return this.$message.error(res.msg)
      }
      if (res.data.length > 0) {
        this.noData = true
        // this.nextTicketInfo = res.data[0]
        // this.$store.commit('STOREAUTOLINK', res.data[0].entity.link)
        this.nextTicketAllInfo = res.data
        this.$nextTick(() => {
          this.isShow = true
          // this.implementChrenInitData(res.data)
        })
      } else {
        // this.nextTicketInfo = null
        // this.$store.commit('STOREAUTOLINK', '')
        this.nextTicketAllInfo = []
        this.noData = false
        this.$message.error('No Tickets Available. Try changing your filter conditions to proceed.')
      }
      this.loading = false
      this.dataLoading = false
    }
  }
}
</script>
<style scoped>
::v-deep .el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /*height:600px;*/
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body{
  flex:1;
  overflow: auto;
}
</style>
